<template>
  <div class="tab-title-page withdrawal">
    <div class="common_form_search">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchForm"
      >
        <el-form-item label="所属账号">
          <el-input
            v-model="searchForm.adminMobile"
            placeholder="请输入所属账号"
            clearable
          ></el-input>
        </el-form-item>
<!--        <el-form-item label="供应商名称">-->
<!--          <el-input-->
<!--            v-model="searchForm.shopName"-->
<!--            placeholder="请输入供应商名称"-->
<!--            clearable-->
<!--          ></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="状态">
          <el-select
            v-model="searchForm.status"
            placeholder="全部"
            clearable
          >
            <el-option
              label="待审核"
              :value="1"
            ></el-option>
            <el-option
              label="已入账"
              :value="2"
            ></el-option>
            <el-option
              label="未入账"
              :value="3"
            ></el-option>
            <el-option
              label="提现拒绝"
              :value="4"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间">
          <my-date-picker ref="myDatePicker"></my-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            @click="search()"
          >查询</el-button>
          <el-button
            size="small"
            @click="reset()"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider class="middle_divider"></el-divider>
    <div class="child_page">
      <div class="flex align-center table-top-btns">
        <h5 class="flex align-center">
          <svg-icon
            style="margin-right:15px"
            icon-class="list"
            :size="15"
          />数据列表
        </h5>
        <el-button
          v-if="$hasMethod('#export')"
          size="small"
          icon="el-icon-upload2"
          class="export-btn"
          @click="exportFile"
        >导出</el-button>
      </div>
      <el-table
        border
        :data="tableData"
      >
        <el-table-column
          align="center"
          prop="id"
          label="编号"
        />
        <el-table-column
          align="center"
          prop="userKey"
          label="userID"
        />
        <el-table-column
          align="center"
          label="所属账号"
        >
          <template slot-scope="scope">
            <span class="blue-font">{{scope.row.mobile}}{{scope.row.cert_name?'（'+scope.row.cert_name+'）':''}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="withdrawal_amount"
          label="提现金额"
        />
        <el-table-column
          align="center"
          label="提现方式"
        >
          <template slot-scope="scope">
            <span>{{scope.row.pay_type==1?'支付宝':''}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="收款人信息"
        >
          <template slot-scope="scope">
            <span>{{scope.row.payee_account}}{{scope.row.payee_name}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="alipay_trade_no"
          label="流水号"
        />
        <el-table-column
          align="center"
          prop="apply_time"
          label="申请时间"
          width="100"
        />
        <el-table-column
          align="center"
          prop="check_time"
          label="审核时间"
          width="100"
        />
        <el-table-column
          align="center"
          prop="arrival_time"
          label="提现到账时间"
          width="100"
        />
        <el-table-column
          align="center"
          label="状态"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.status==1?'':scope.row.status==2||scope.row.status==3?'success':'danger'">{{scope.row.status==1?'待审核':scope.row.status==2?'已入账':scope.row.status==3?'未入账':'提现拒绝'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="原因"
        >
          <template slot-scope="scope">
            <span class="red-font">{{scope.row.refuse_reason}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="admin_name"
          label="操作人"
        />
      </el-table>
      <custom-page
        ref="customPage"
        :total="total"
        @getList="getList"
      ></custom-page>
    </div>
  </div>
</template>

<script>
import customPage from "@/components/customPage";
import myDatePicker from "@/components/myDatePicker";
import { userWithdrawalList, withdrawalListExport } from "@/api/finance";
export default {
  components: { customPage, myDatePicker },
  data() {
    return {
      searchForm: {
        adminMobile: '',
        shopName: '',
        status: '',
        arrivalTime: ''
      },
      tableData: [],
      total: 0
    }
  },
  methods: {
    // 获取数据
    getList() {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage;
      userWithdrawalList({
        page,
        pageSize,
        ...this.searchForm
      }).then(res => {
        this.tableData = res.data || [];
        this.total = res.total || 0;
      })
    },
    // 查询
    search() {
      const pickerVal = this.$refs.myDatePicker.getVal();
      if (pickerVal !== 'error') {
        this.searchForm.arrivalTime = pickerVal;
        this.$refs.customPage.page = 1;
        this.getList();
      }
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset();
      }
      this.searchForm = {
        adminMobile: '',
        status: '',
        shopName: '',
        arrivalTime: ''
      };
      this.getList();
    },
    // 导出
    exportFile() {
      const pickerVal = this.$refs.myDatePicker.getVal();
      if (pickerVal !== 'error') {
        this.searchForm.arrivalTime = pickerVal;
        withdrawalListExport(this.searchForm);
      }
    },
  },
  mounted() {
    this.getList();
  }
}
</script>

<style lang="scss" scoped>
.common_form_search {
  padding: 15px 15px 0 15px;
  background-color: #ffffff;
  border-radius: 0 0 10px 10px;
}
.child_page {
  padding: 15px;
}
</style>
